<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>DOM操作</title>
    <style type="text/css">
        html, div, ul, li {
            margin: 0;
            padding: 0;
        }
        a {
            cursor: pointer;
        }

        li {
            list-style: none;
            cursor: pointer;
        }

        fieldset {
            border: #000 1px dashed;
            width: 225px;
            height: 225px;
            padding: 10px;
            text-align: center;
            float: left;
            margin-left: 5px;
        }

        #cont_left {
            width: 300px;
            height: 500px;
            float: left;
        }

        #cont_right {
            float: left;
        }

        .newcss1 {
            background-color: yellowgreen;
        }
        .menu{
            display: none;
        }
    </style>
</head>
<body>
<div id="cont_left">
    <ul>
        <img src="img/fold.gif" alt=""><a onclick="show('menu1')"> 通过DOM获取信息 </a>
        <ul id="menu1" class="menu">
            <li onclick="showImg()"><img src="img/doc.gif" alt="">获取原始图片路径</li>
            <li onclick="getFruit()"><img src="img/doc.gif" alt="">获取我喜欢的水果</li>
        </ul>
    </ul>

    <ul>
        <img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
        <ul id="menu2" class="menu">
            <li onclick="createImg()"><img src="img/doc.gif" alt="">创建图片</li>
            <li onclick="cloneImg()"><img  src="img/doc.gif" alt="">克隆图片</li>
            <li onclick="changeImg()"><img src="img/doc.gif" alt="">改变图片</li>
            <li onclick="removeImg()"><img src="img/doc.gif" alt="">删除图片</li>
        </ul>
    </ul>

    <ul><img src="img/fold.gif" alt=""><a onclick="show('menu3')"> 通过DOM操作样式 </a>
        <ul id="menu3" class="menu">
            <li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
            <li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
        </ul>
    </ul>

</div>
<fieldset>
    <legend>原始图片</legend>
    <img id="fruit" src="img/fruit.jpg">
</fieldset>
<fieldset>
    <legend>图片路径</legend>
    <p id="msg1">在这里显示</p>
</fieldset>
<fieldset>
    <legend>选择你喜欢的水果</legend>
    <ul style="text-align: left;">
        <li>
            <input name="enjoy" type="checkbox" value="苹果"/>苹果
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="香蕉" checked="checked"/>香蕉
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="葡萄"/>葡萄
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="梨" checked="checked"/>梨
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="西瓜"/>西瓜
        </li>
    </ul>
    <div id="msg2" style="margin-top: 10px;text-align: left;"></div>
</fieldset>
<fieldset>
    <legend>创建图片</legend>
    <div id="msg3"></div>
</fieldset>
<fieldset>
    <legend>克隆图片</legend>
    <div id="msg4"></div>
</fieldset>
<script>
    
    //179000541 陈建璋
    function show(title) {
        let uls = document.querySelectorAll(".menu")
        for (let index = 0;index<uls.length;index++){
            uls[index].style.display = "none"
        }
        let currentMenu = document.getElementById(title);
        currentMenu.style.display = "block"
    }

    //获取原始图片路径
    function showImg() {
        var imgPath = document.querySelector("#fruit");
        var msg1 = document.querySelector('#msg1');
        msg1.innerHTML = imgPath.getAttribute('src')
    }

    //获取喜欢的水果
    function getFruit() {
        var msg2 = document.querySelector('#msg2');
        var fruit = document.getElementsByName("enjoy");
        var arr = '';
        for (let index = 0; index < fruit.length; index++) {
            if (fruit[index].checked) {
                arr = arr.concat(fruit[index].value + " ")
            }
        }
        console.log(arr)
        msg2.innerHTML = "你喜欢的水果是：" + arr
    }

    //创建图片
    var num = 1
    function createImg() {
        var img = document.createElement("img")
        if (num === 1) {
            var msg3 = document.querySelector('#msg3');
            img.src = "img/grape.jpg";
            msg3.appendChild(img);
            num--;
        }
    }

    //克隆图片
    function cloneImg() {
        var msg4 = document.querySelector('#msg4');
        var img = document.querySelector("#fruit");
        var clone = img.cloneNode()
        msg4.appendChild(clone)
    }

    //改变图片
    function changeImg() {
        var imgPath = document.querySelector("#fruit");
        imgPath.setAttribute("src","img/grape.jpg")
    }

    //删除图片
    function removeImg() {
        var fieldset = document.querySelectorAll("fieldset")[0];
        var img = document.querySelector("#fruit");
        fieldset.removeChild(img)
        console.log(fieldset)
    }

    //操作样式1
    function changeCss1() {
        var img = document.querySelector("#fruit");
        img.style.border = "2px solid red"
    }

    //操作样式2
    function changeCss2() {
        var fieldset = document.querySelectorAll("fieldset");
        for (var index = 0; index < fieldset.length; index++){
            fieldset[index].style.backgroundColor = "chartreuse"
        }
    }
</script>
</body>
</html>

